<template>
  <div class="my">
    <van-nav-bar title="我的钱包" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px">
      <div class="my-content" style="height: 150px; border-radius: 10px">
        <div class="my-title" style="width: 100%">
          <div class="name" style="font-size: 12px; text-align: center; margin-top: 40px">
            我的资产（元）<van-icon name="browsing-history" />
          </div>
          <div class="tel" style="font-size: 20px; text-align: center">
            <span style="font-size: 12px !important">余额￥</span>{{ wallerData.balance }}
          </div>
        </div>
      </div>
    </div>
    <van-cell-group class="mar-top-1em">
      <van-cell title="收支明细" is-link @click="() => {
      $router.push('/revAndExp');
    }
      " label="每一笔成功的收支记录">
        <template #icon>
          <van-icon name="dikouquan" size="16" class-prefix="icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="mar-top-1em">
      <van-cell title="支付设置" :label="!wallerData.walletPassSatus ? isPasswordDesc : ''" @click="toContactUs" is-link
        icon="location-o">

        <template #icon>
          <van-icon name="shezhi" size="16" class-prefix="icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button type="info" v-if="isWechatOfficialAccount()" block @click="toRecharge">充值</van-button>
    </div>
    <van-action-sheet v-model="paymentSettingsShow" :actions="actions" @select="onSelect" />
    <van-action-sheet v-model="showRecharge" title="充值" style="height: 500px">
      <div style="padding: 16px">
        <van-form @submit="rechargeSubmit" style="background-color: #fff">
          <van-field label="充值金额" readonly clickable :value="rechargeAmount" @touchstart.native.stop="show = true" />
          <div style="margin: 16px 0">
            <van-button block type="info" :disabled="!rechargeAmount" native-type="submit">充值</van-button>
          </div>
        </van-form>
        <van-number-keyboard :extra-key="extraKey" v-model="rechargeAmount" :show="true" />
      </div>
    </van-action-sheet>
    <van-popup v-model="showSetPasswordTip" :close-on-click-overlay="false" position="bottom"
      :style="{ height: '60%', 'background-color': 'rgb(237 237 237)' }">
      <div style="font-size: 16px; margin: 20px 20px 14px 16px">提示</div>
        <div style="font-size:14px;padding:20px">您还未设置支付密码，请先设置支付密码</div>
        <van-col span="24">
          <div style="float: right; margin: 16px 14px 16px 0">
            <van-button size="small" type="info" style="margin-right: 5px" @click="() => $router.push('./retrievePassword')">确定</van-button>
            <van-button size="small" style="margin-right: 5px" @click="() => $router.push('./personCenter')">取消</van-button>
          </div>
        </van-col>
    </van-popup>
    <!-- <van-action-sheet v-model="showWithdrawal" title="提现" style="height: 500px">
      <div style="padding: 16px">
        <van-cell-group class="mar-top-1em">
          <van-cell title="银行卡" value="工商银行" is-link @click="() => {
            $router.push('/bankAccount');
          }
            ">
            <template #icon>
              <van-icon name="卡包" size="16" class-prefix="icon" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-form @submit="onSubmit2" style="background-color: #fff">
          <van-field label="提现金额" readonly clickable :value="value" @touchstart.native.stop="show = true" />
          <van-number-keyboard v-model="value" :show="show" :maxlength="6" @blur="show = false" />
        </van-form>
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提现</van-button>
        </div>
        <van-number-keyboard :show="show" @blur="show = false" @input="onInput" @delete="onDelete" />
      </div>
    </van-action-sheet> -->

    <!-- <div style="margin: 16px;">
            <van-button block @click="toWithdrawal">提现</van-button>
        </div> -->
  </div>
</template>

<script>
import { isWechatOfficialAccount } from '@/utils/func.js'
export default {
  name: "my",
  data() {
    return {
      isWechatOfficialAccount,
      isPasswordDesc: "您还未设置支付密码，请设置支付密码",
      wallerData: {},
      showRecharge: false,
      showWithdrawal: false,
      paymentSettingsShow: false,
      show: true,
      value: "",
      rechargeAmount: "",
      actions: [{ name: "设置支付密码" }, { name: "取消" }],
      extraKey: '.'
    };
  },
  computed: {
    showSetPasswordTip() {
      if ( JSON.stringify(this.wallerData) === '{}') {
        return false
      }
      return !this.wallerData.walletPassSatus
    }
  },
  methods: {
    //微信支付
    async rechargeSubmit() {
      try {
        const params = {
          money: this.rechargeAmount,
          openId: localStorage.getItem("openId")
        }
        // 异步获取支付参数，假设通过接口请求获取
        const payParams = await this.$post('/wxpay/jsapiPay', params);

        // 调用微信支付
        this.callWeixinPay(payParams);
      } catch (error) {
        console.error('Failed to get payment parameters', error);
      }
    },
    callWeixinPay(payParams) {
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(payParams), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady(payParams));
          document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady(payParams));
        }
      } else {
        this.onBridgeReady(payParams);
      }
    },
    onBridgeReady(payParams) {
      /* eslint-disable */
      WeixinJSBridge.invoke('getBrandWCPayRequest', {
        appId: payParams.data.appId,     //公众号ID，由商户传入     
        timeStamp: payParams.data.timeStamp,         //时间戳，自1970年以来的秒数     
        nonceStr: payParams.data.nonceStr, //随机串     
        package: payParams.data.package,
        signType: payParams.data.signType,         //微信签名方式：     
        paySign: payParams.data.paySign
      }, function (res) {
        if (res.err_msg === "get_brand_wcpay_request:ok") {
          // 支付成功后的处理逻辑
          this.showRecharge = false
          this.rechargeAmount = ''
        } else {
          this.$toast('支付失败请联系客户')
        }
      });
    },
    onSubmit2() {
      //
    },
    onClickRight() {
      this.$toast("按钮");
    },
    toContactUs() {
      this.paymentSettingsShow = true;
    },
    toAccount() {
      this.$router.push("/account");
    },
    onClickLeft() {
      this.$router.push("/personCenter");
    },
    toRecharge() {
      // this.showRecharge = true;
      this.$router.push('/recharge')
    },
    onInput(rechargeAmount) {
      this.$toast(rechargeAmount);
    },
    onDelete() {
      this.$toast("删除");
    },
    toWithdrawal() {
      this.showWithdrawal = true;
    },
    onSelect(item) {
      if (item.name === "取消") {
        this.paymentSettingsShow = false;
      } else {
        this.$router.push({
          path: "/retrievePassword",
          query: {
            walletPassSatus: this.wallerData.walletPassSatus,
          },
        });
      }
    },
    getWallerData() {
      this.$post("/customer/wallet/info").then((res) => {
        if (res && res.code * 1 === 200) {
          this.wallerData = res.data;
          this.wallerData.walletPassSatus
            ? (this.actions[0].name = "修改/找回支付密码")
            : (this.actions[0].name = "设置支付密码");
        } else {
          this.wallerData = {};
        }
      });
    },
  },
  mounted() {
    this.getWallerData();
  },
};
</script>

<style scoped>
.my {
  background-color: #f5f5f5;
  font-size: 1rem;
}

.title {
  height: 3.2em;
  background-color: #0283ef;
  text-align: center;
  line-height: 3.2em;
  color: #fff;
  font-size: 1.5em;
}

.sculpture {
  float: left;
}

.my-content {
  padding-top: 2em;
  padding-left: 1rem;
  /* background-color: #fff; */
  border-bottom: 1px solid #e9e9e9;
  background-image: linear-gradient(#2833b4, #8991eb);
  /* background-color: #0283ef; */
}

.my-title {
  float: left;
  margin-left: 0.8rem;
}

.name {
  font-size: 0.6rem;
  margin-top: 0.6em;
  color: #fff;
}

.tel {
  font-size: 0.4rem;
  margin-top: 0.6em;
  color: rgb(255, 255, 255);
}

.status {
  color: #ffffff;
}

.mar-top-1em {
  margin-top: 1em;
}
</style>
<style>
.van-key__wrapper{
  text-align: center !important;
}
.van-password-input__item i {
  margin-top: 0
}
</style>